import React, { useEffect, useState } from 'react'
import { Table, Tag, Button, Space, Popover, Switch, Modal, Tree } from 'antd'
import {
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'
import axios from 'axios'

const { confirm } = Modal

export default function RoleList() {
  const [dataSource, setDataSource] = useState([])
  const [rightList, setRightList] = useState([])
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [currentRights, setCurrentRights] = useState([])
  const [currentRole, setCurrentRole] = useState('')

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '权限名称',
      dataIndex: 'roleName',
      key: 'roleName',
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            <Space>
              <Button
                danger
                type="primary"
                shape="circle"
                icon={<DeleteOutlined />}
                onClick={() => comfirmHandler(item)}
              ></Button>

              <Button
                type="primary"
                shape="circle"
                icon={<EditOutlined />}
                onClick={() => {
                  setIsModalVisible(true)
                  setCurrentRights(item.rights)
                  setCurrentRole(item.id)
                }}
              ></Button>
            </Space>
          </div>
        )
      },
    },
  ]

  useEffect(() => {
    getTableList()
    getRightList()
  }, [])
  const getTableList = () => {
    axios.get('/roles').then((res) => {
      const list = res.data
      setDataSource(list)
    })
  }
  const getRightList = () => {
    axios.get('/rights?_embed=children').then((res) => {
      // const list = res.data
      setRightList(res.data)
    })
  }
  const comfirmHandler = (item) => {
    confirm({
      title: '确定要删除吗?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        deleteHandler(item)
      },
      onCancel() {
        console.log('Cancel')
      },
    })
  }
  const deleteHandler = (item) => {
    console.log(item)
    axios.delete('/roles/' + item.id).then((res) => {
      console.log(res)
      getTableList()
    })
  }
  const showModal = () => {
    setIsModalVisible(true)
  }
  const handleOk = () => {
    console.log(currentRights.checked)

    axios
      .patch('/roles/' + currentRole, {
        rights: currentRights.checked,
      })
      .then((res) => {
        setIsModalVisible(false)
        getTableList()
      })

  }
  const handleCancel = () => {
    setIsModalVisible(false)
  }

  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info)
  }
  const onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info)
    setCurrentRights(checkedKeys)
  }

  return (
    <>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey={(item) => item.id}
        pagination={{
          pageSize: 5,
        }}
      />
      {isModalVisible?  <Modal
        title="权限分配"
        open={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Tree
          checkable
          checkStrictly
          //   defaultExpandedKeys={['0-0-0', '0-0-1']}
          //   defaultSelectedKeys={['0-0-0', '0-0-1']}
          checkedKeys={currentRights}
          onSelect={onSelect}
          onCheck={onCheck}
          treeData={rightList}
        />
      </Modal>:null}
    
    </>
  )
}
